<template>
  <div class="page">
    <div class="table-wrap">
      <div class="tools">
        <el-select v-model="menuId" placeholder="请选择菜单" size="small" @change="menuChange">
          <el-option value="" label="全部"></el-option>
          <el-option v-for="(item,index) in menuData" :key="index" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </div>
      <el-table :data="listData" border>
        <el-table-column prop="parentName" label="菜单名称" align="center"></el-table-column>
        <el-table-column prop="name" label="功能名称" align="center"></el-table-column>
        <!-- <el-table-column prop="code" label="菜单编码" align="center"></el-table-column> -->
        <el-table-column prop="code" label="创建时间" align="center">
          <span slot-scope="scope">{{ scope.row.createdAt | formatDate }}</span>
        </el-table-column>
        <el-table-column prop="code" label="操作" align="center">
          <div slot-scope="scope">
            <el-button type="primary" size="mini" @click="update('update',scope.row)">
              修改
            </el-button>
            <el-button type="info" size="mini" @click="update('delete',scope.row)">
              删除
            </el-button>
          </div>
        </el-table-column>
      </el-table>
    </div>
    <msg></msg>
  </div>
</template>

<script>
import { api, formatDate } from '~/assets/utils'
import msg from '@/components/msg'
export default {
  layout: 'project',
  data() {
    return {
      menuId: '',
      menuData: [],
      listData: []
    }
  },
  components: {
    msg
  },
  filters: {
    formatDate(val) {
      return formatDate(val, 'yyyy-MM-dd hh:mm')
    }
  },
  methods: {
    menuChange(e) {
      console.log(e)
      this.getData()
    },
    update(type, item) {
      if (type === 'update') {
        this.$router.push({
          path: `subMenuDetail`,
          query: item
        })
      } else {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await this.$axios.post(api.deleteMenu, {
            id: item.id
          })
          this.$message.success('删除成功')
          this.getData()
        })
      }
    },
    async getData() {
      const { menuId } = this
      const { projectId } = this.$route.params
      const res = await this.$axios.get(api.menuList, { params: { projectId, type: 'sub', parentId: menuId } })
      this.listData = res.data
    }
  },
  async mounted() {
    const { projectId } = this.$route.params
    const res = await this.$axios.get(api.menuList, { params: { projectId } })
    this.menuData = res.data
    this.getData()
  }
}
</script>

<style lang="scss" scoped>
.page{
  display: flex;
  .table-wrap{
    flex: 1;
  }
}
.tools{
  padding: 10px 0;
}

</style>
